<template>
	<view class="content">
		<u-loading-page :loading="peiLoading" bg-color="#e8e8e8"></u-loading-page>
		<u-navbar
			:title="pageTitle"
			@leftClick="handleLeftClick"
			bgColor="#EFF5FF"
		>
		</u-navbar>
		<view class="top_view flex">
			<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/seach_icon.png" class="top_view_icon"
				mode=""></image>
			<input type="text" class="top_view_input" v-model="searchVal" password="请输入药品或医生名称">
			<view class="top_view_input_right">
				搜索
			</view>
		</view>
		<view class="peiImg">
			<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/pei.png"></image>
		</view>
		<view class="tabBlock">
			<u-tabs
			  :list="list1"
				@click="handleTabClick"
				:current="current"
				lineWidth="10"
				lineColor="#0165FB"
				:activeStyle="{
					fontFamily: 'Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20',
					fontWeight: 'normal',
					fontSize: '28rpx',
					color: '#333333'
				}"
				:inactiveStyle="{
					fontFamily: 'Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20',
					fontWeight: 'normal',
					fontSize: '28rpx',
					color: '#999999'
				}"
			></u-tabs>
		</view>
		<view class="listBlock">
			<scroll-view style="height: 60vh;" scroll-y="true" @scrolltolower="handleScrolltolower">
				<view v-for="(item, index) in hospitalList" :key="index">
					<view class="listBlockItem" @click="handleLinkDetail(item)">
						<image class="listBlockItem-logoImg" :src="item.img_url"></image>
						<view class="listBlockItem-rightBlock">
							<view class="listBlockItem-rightBlock-name">{{ item.name }}</view>
							<view class="listBlockItem-rightBlock-middle">
								<view class="listBlockItem-rightBlock-middle-type">{{ item.level.name }}</view>
								<u-icon name="map" size="12" style="margin-left: 16rpx;"></u-icon>
								<view class="listBlockItem-rightBlock-middle-lone">{{ item.juli }}</view>
							</view>
							<view class="listBlockItem-rightBlock-bottom">{{ item.jianjie_info }}</view>
						</view>
					</view>
					<u-divider style="margin: 32rpx 32rpx 0xp 32rpx;"></u-divider>
				</view>
				<view class="morefont" v-if="showMore">暂无更多～</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { getHospitalList } from '@/api/common.js'
	export default{
		data() {
			return {
				statusHeight: 0,
				current: 0,
				showMore: false,
				searchVal: '',
				page: 1,
				pageTitle: '',
				lastPage: 0,
				listType: 1,
				peiLoading: false,
				list1: [
					{
						name: '推荐',
						type: 1
					},
					{
						name: '距离',
						type: 2
					}
				],
				hospitalList: [
					{
						name: '北京华科中西医结合医院',
						type: '三甲',
						long: '916.11km',
						content: '北京协和医院与四川大学华西医院和中国人民解放军总医院，三家医院连续九年雄霸综合排名前三位。'
					},
					{
						name: '北京华科中西医结合医院',
						type: '三甲',
						long: '916.11km',
						content: '北京协和医院与四川大学华西医院和中国人民解放军总医院，三家医院连续九年雄霸综合排名前三位。'
					},
					{
						name: '北京华科中西医结合医院',
						type: '三甲',
						long: '916.11km',
						content: '北京协和医院与四川大学华西医院和中国人民解放军总医院，三家医院连续九年雄霸综合排名前三位。'
					},
					{
						name: '北京华科中西医结合医院',
						type: '三甲',
						long: '916.11km',
						content: '北京协和医院与四川大学华西医院和中国人民解放军总医院，三家医院连续九年雄霸综合排名前三位。'
					}
				]
			}
		},
		onLoad() {
			let statusInfo = uni.getSystemInfoSync();
			this.statusHeight = statusInfo.statusBarHeight;
		},
		onShow() {
			this.pageTitle = uni.getStorageSync('indexType').title
			this.hospitalList = []
			this.getList()
		},
		methods: {
			getList() {
				this.peiLoading = true
				getHospitalList({
					key: this.searchVal,
					type: this.listType,
					page: this.page,
					lat: 0,
					lng: 0
				}).then(res => {
					const { code, data } = res
					if (code == 200001) {
						if (data.data.length > 0) {
							if (this.hospitalList.length == 0) {
								this.hospitalList = data.data
							} else {
								this.hospitalList = this.hospitalList.concat(data.data)
							}
							this.lastPage = data.last_page
							this.showMore = false
						} else {
							this.showMore = true
						}
					}
					this.peiLoading = false
				})
				.catch(e => {
					this.peiLoading = false
				})
			},
			handleTabClick(e) {
				this.current = e.index
				this.listType = e.type
				this.page = 1
				this.hospitalList = []
				this.getList()
			},
			handleLinkDetail(item) {
				uni.setStorageSync('hospitalListItem', item)
				uni.navigateTo({
					url: '/pages/peiDetail/peiDetail'
				})
			},
			handleScrolltolower() {
				if (this.page < this.lastPage) {
					this.page++
					this.getList()
					this.showMore = false
				} else {
					this.showMore = true
				}
			},
			handleLeftClick() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		box-sizing: border-box;
		background: linear-gradient(190deg, #EFF5FF 28%, #fff 33%);
	}
	.top_view {
		width: 100%;
		height: 76rpx;
		border-radius: 40rpx;
		background: #FFF;
		margin-top: 220rpx;
		padding: 0px 30rpx;
		box-sizing: border-box;
	}
	.top_view_icon {
		width: 44rpx;
		height: 44rpx;
	}
	.top_view_input {
		width: 70%;
	}
	.top_view_input_right {
		width: 108rpx;
		color: #0165FB;
		text-align: center;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 26rpx;
		font-weight: 400;
		height: 24rpx;
		line-height: 24rpx;
		border-left: 1rpx solid #DFDFDF;
	}
	.peiImg{
		padding: 28rpx 30rpx 0px 30rpx;
		image{
			width: 686rpx;
			height: 192rpx;
		}
	}
	.tabBlock{
		padding: 32rpx 32rpx 0px 32rpx;
	}
	.listBlock{
		padding: 0px 32rpx;
		.listBlockItem{
			padding-top: 32rpx;
			display: flex;
			align-items: flex-start;
			&-logoImg{
				width: 120rpx;
				height: 120rpx;
				background: #000;
				border-radius: 100% 100%;
			}
			&-rightBlock{
				padding-left: 24rpx;
				&-name{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 36rpx;
					color: #222222;
				}
				&-middle{
					display: flex;
					align-items: center;
					padding-top: 16rpx;
					&-type{
						padding-right: 16rpx;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 28rpx;
						color: #222222;
						border-right: 2px solid #DFDFDF;
					}
					&-lone{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 28rpx;
						color: #999999;
						padding-left: 4rpx;
					}
				}
				&-bottom{
					padding-top: 16rpx;
					width: 492rpx;
					height: 44rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 28rpx;
					color: #999999;
					white-space: nowrap; /* 不换行 */
					overflow: hidden; /* 隐藏超出的内容 */
					text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
				}
			}
		}
	}
	.morefont{
		text-align: center;
		font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		font-weight: normal;
		font-size: 26rpx;
		color: #999999;
	}
</style>